<template>
  <div class="Login_Box" ref="VantaRoot">
    <div class="Login_info_box">
      <div class="Login_info_title" data-text="LOGIN">
        LOGIN
      </div>
      <div class="Login_Info_input">
        <div class="input_box">
          <span>账号:</span>
          <el-input v-model="userInfo.userName" size="large" placeholder="请输入管理员账号" clearable />
        </div>
        <div class="input_box">
          <span>密码:</span>
          <el-input v-model="userInfo.userPass" type="password" size="large" placeholder="请输入密码" show-password
            clearable />
        </div>
      </div>
      <div class="Login_info_btn">
        <el-button type="primary" size="large" :loading="isLoading" @click="onLogining">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue"
import { useRouter } from 'vue-router'
import * as THREE from 'three.js'
import CLOUDS from 'vanta/src/vanta.clouds'
import { UserInfoStore } from '../stores/userInfo'
import { AdminLogin } from '../Net/netApi.js'
import { CustomerMessage } from '../Util/Confirm.js';

const store = UserInfoStore()
let VantaRoot = ref(null);
let vantaEffect = null;
const router = useRouter()
let isLoading = ref(false)

//用户信息
let userInfo = ref({
  userName: "1228920924@qq.com",
  userPass: "123456",
});

onMounted(() => {
  vantaEffect = CLOUDS({
    el: VantaRoot.value,
    THREE: THREE,
    color: 0x16212a,
  })
})

onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy()
  }
})

const onLogining = async () => {
  isLoading.value = true
  const res = await AdminLogin(userInfo.value.userName, userInfo.value.userPass)
  if (res.code == '200') {
    let saveTemp = res.data
    store.loginStatus = true
    store.userInfo = saveTemp
    CustomerMessage('登录成功', 'success', true)
    store.Persist()
    isLoading.value = false
    router.push("/home")
  }else{
    CustomerMessage('登录失败', 'error', true)
    isLoading.value=false
  }
}

</script>

<style lang='less' scoped>
.Login_Box {
  position: relative;
  width: 100vw;
  height: 100vh;

  .Login_info_box {
    position: relative;
    top: 50%;
    left: 50%;
    width: 35vw;
    height: 50vh;
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5%;
    transform: translate(-50%, -50%);
    box-shadow: 0.2rem 0.2rem 0.2rem 0.2rem rgba(170, 170, 170, 0.2);

    .Login_info_title {
      display: inline-block;
      position: absolute;
      top: -15%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 4rem;
      font-weight: 700;
      z-index: 1;

      &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        color: #fff;
        -webkit-background-clip: text;
        background-clip: text;
        padding: 0;
        border: 2px solid #000;
      }
    }

    .Login_Info_input {
      position: absolute;
      top: 50%;
      width: 100%;
      height: 60%;
      transform: translateY(-60%);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      .input_box {
        width: 60%;
        height: 2rem;
        padding: 0.5rem;
      }
    }

    .Login_info_btn {
      position: absolute;
      left: 50%;
      bottom: 10%;
      transform: translate(-50%, -10%);
    }
  }
}
</style>